//创建一个构造函数 select就是形参 传过来的是哪个盒子
function Tabs(select,type = 'click') {//type 表示触发事件的类型 如果这个参数不传 默认就是点击事件
//第一个属性 选项卡的范围元素  this指向的就是select传过来当前的实例 
this.ele = document.querySelector(select);
//获取元素
this.btns = this.ele.querySelectorAll('ul>li');//this.ele 获取在box盒子的范围 获取li
this.boxs = this.ele.querySelectorAll('ol>li');//this.ele 获取在box盒子范围里面的li
this.type = type;
//这里的this指的是当前实例
this.init();//当前的实例调用init方法
console.log(this);
}
//需要一个方法
//方法 挂载到原型上
Tabs.prototype.init = function() {
    this.btns.forEach((item,index) => {//遍历当前实例的btns
        item.addEventListener(this.type,() => {
            //↑给当前实例的每一项添加传进来的事件类型
            for(let i = 0;i < this.btns.length;i++) {
                //遍历当前实例的长度 给每一项置空 
                this.btns[i].className = '';
                this.boxs[i].className = '';
            }
            //当前实例触发事件 就给它们切换类名
            this.btns[index].className = 'active';
            this.boxs[index].className = 'active';
        });
    })
}
/*
new Tabs('#box','click'); 我传进来的是id名为box的这个盒子 this就指向box的这个盒子
然后把这个id名为box的盒子获取到 
this.btns = this.ele.querySelectorAll('ul>li'); 获取box这个盒子里面的li
如果在box盒子的范围外还有li 不会被获取 
 */